<template>
<div ref="assessmentResult">
  <div class="box box-custom">
    <div class="box-header with-border">
      <div class="box-title">{{ title }}</div>
      <div class="box-tools pull-right">
        <button type="button" class="btn-link left10" v-on:click="showAssessmentDetails">{{ showText }}</button>
        <button type="button" class="btn-link left10" v-show="!notShare" v-on:click="shareResult"><i class="el-icon-share"></i>分享该评估</button>
        <span class="text-danger pointer left10" v-if="!notShare" v-on:click="delResult"><i class="el-icon-delete"></i>删除该评估</span>
      </div>
    </div>
    <div class="box-body" v-if="!showAssessmentDetailsDialog">
      <div id="overview" class="overview">
        <div class="textCenter">
          <span class="totalScore">{{ assessmentData.assessResult}}</span>
        </div>
        <!-- div class="description"> {{ assessmentData.totalScore }}{{ assessmentData.description}} </div -->
      </div>
      <hr/>
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default" v-for="(item, key) in assessmentData.kpi.categoryKpi">
          <div class="panel-heading clearfix">
            <div>
              <span class="panel-title">
                <span class="strong">{{ item.name }}</span>
                <span class="strong" v-if="item.score !== undefined"> &nbsp;&nbsp;{{ item.score }} &nbsp;&nbsp; 分</span>
                <!-- 颜色样式 label-danger,.label-info,.label-warning,.label-primary,.label-success, -->
                <!--span class="label label-custom left10" v-bind:class="$store.getters.getDictionary.msgLevel[item.status].className">
                  {{ $store.getters.getDictionary.msgLevel[item.status].text }}
                </span-->
              </span>
              <span class="pull-right">
                <a data-toggle="collapse" data-parent="#accordion" :href="'#collapse' + key">
                  <span class="label label-default">详情</span>
                </a>
              </span>
            </div>  
          </div>
          <div class="panel-collapse collapse" :id="'collapse' + key" aria-expanded="false">
            <div class="panel-body">
              <div v-show="item.description.length > 0">
                <label></label><span v-html="item.description"></span>
              </div>
              <div v-for="itemSon in item.secondCategoryKpi">
              <p>
                <div>
                  <span class="strong">{{ itemSon.name }}</span>
                  <span class="strong" v-if="itemSon.score !== undefined">&nbsp;&nbsp;{{ itemSon.score }}&nbsp;&nbsp;分</span>
                  <span v-if="itemSon.status === 'NORMAL'" class="label label-custom left10" v-bind:class="$store.getters.getDictionary.msgLevel.NORMAL.className">
                    {{ $store.getters.getDictionary.msgLevel.NORMAL.text }}
                  </span>
                  <span v-if="itemSon.status === 'SERIOUS'" class="label label-custom left10" v-bind:class="$store.getters.getDictionary.msgLevel.SERIOUS.className">
                    {{ $store.getters.getDictionary.msgLevel.SERIOUS.text }}
                  </span>
                  <span v-if="itemSon.status === 'WARN'" class="label label-custom left10" v-bind:class="$store.getters.getDictionary.msgLevel.WARN.className">
                    {{ $store.getters.getDictionary.msgLevel.WARN.text }}
                  </span>
                </div>
                <div class="description">
                  <span v-html="itemSon.description"></span>
                </div>
              </p>
              </div>
              <hr/>
            </div>
          </div>
        </div>
      </div>
      <div class="panel-group" id="accordion2">
        <div class="panel panel-default">
          <div class="panel-heading clearfix">
            <span class="panel-title strong">
              评测结论
            </span>
            <span class="pull-right">
              <a data-toggle="collapse" data-parent="#accordion1" href="#collapse">
                <span class="label label-default">详情</span>
              </a>
            </span>
          </div>
          <div class="panel-collapse collapse in" id="collapse" aria-expanded="false">
            <div class="panel-body">
              <div class="description">
                <label>总分：<span class="strong"> &nbsp;&nbsp;{{ assessmentData.totalScore }}</span></label>
                <div> {{ assessmentData.description}} </div>
                <!-- div><span v-html="assessmentData.suggestion"></span></div -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box-body" v-if="showAssessmentDetailsDialog">
      <assessmentDetails :personnel="personnel" :assessmentDetailsData="assessmentDetailsData"></assessmentDetails>
    </div>
  </div>
</div>
</template>
<script>
import assessmentDetails from './assessmentDetails.vue'

export default {
  name: 'assessmentResult',
  data () {
    return {
      title: '',
      showText: '查看回答详情',
      // 调查问卷
      questionnaireData: {},
      // 调查回答记录
      assessmentRecordData: {},
      // 调查回答详情
      assessmentDetailsData: {},
      showAssessmentDetailsDialog: false,
      shareResultDialog: false,
      shareUrl: null,
      sharePW: null
    }
  },
  props: {
    // 人员信息详情
    personnel: {
      type: Object,
      default: {}
    },
    // 评估结果
    assessmentData: {
      type: Object,
      default: {}
    },
    // 是否是分享页面
    notShare: {
      type: Boolean,
      default: false
    }
  },
  components: {
    assessmentDetails
  },
  methods: {
    clearAll () {
      this.title = ''
      this.showText = '查看回答详情'
      this.questionnaireData = {}
      this.assessmentRecordData = {}
      this.assessmentDetailsData = {}
      this.showAssessmentDetailsDialog = false
      this.shareResultDialog = false
    },
    shareResult () {
      this.$http.get('share/createReportShare?reportId=' + this.assessmentData.id + '&organizationId=' + this.assessmentData.organizationId).then(
        response => {
          this.shareUrl = response.data.data.url
          this.sharePW = response.data.data.pass
          // this.shareResultDialog = true
          let html = '<div><label>分享地址：</label> <span>' + this.shareUrl + '</span></div>'
            + '<div><label>分享密码：</label> <span>' + this.sharePW + '</span></div>'
          alert(html)
        }
      )
    },
    initDetailsData () {
      let DetailsData = {}
      DetailsData.suName = this.questionnaireData.suName
      DetailsData.description = this.questionnaireData.description
      DetailsData.anto_map =  this.assessmentData.kpi.anto_map
      DetailsData.dateTime = this.assessmentData.dateTime
      DetailsData.categorys = []
      this.questionnaireData.categorys.map(
        (primaryCategory) => {
          let category = {}
          category.id = primaryCategory.id
          category.name = primaryCategory.name
          category.children = []
          primaryCategory.children.map(
            (secondCategory) => {
              let _category = {}
              _category.id = secondCategory.id
              _category.name = secondCategory.name
              _category.questions = []
              secondCategory.questions.map(
                (question) => {
                  let _question = {}
                  _question.id = question.id
                  _question.categoryId = question.categoryId
                  _question.item = question.item
                  _question.quName = question.quName
                  _question.quNote = question.quNote
                  _question.file = question.file
                  let index = 'question' + question.id
                  let answer = this.assessmentRecordData[index]
                  if (!answer) {
                    _category.questions.push(_question)
                  } else {
                    _question.optionId = answer.optionId
                    _question.optionAnswer = ''
                    _question.optionScore = answer.optionScore
                    _question.otherOptionsAnswer = answer.otherOptionsAnswer.join('<br/>')
                    question.quRadios.map(
                      (quRadio) => {
                        if (quRadio.id === answer.optionId) {
                          _question.optionAnswer = quRadio.optionName
                        }
                      }
                    )
                    _category.questions.push(_question)
                  }
                }
              )
              category.children.push(_category)
            }
          )
          DetailsData.categorys.push(category)
        }
      )
      this.assessmentDetailsData = DetailsData
      this.$alert('', '', false)
      this.title = this.personnel.name + ': ' + this.assessmentDetailsData.suName + ',' + '评估详情记录'
      this.showText = '查看评估结果'
      this.showAssessmentDetailsDialog = true
    },
    getRecordData () {
      this.$http.get('insAssessment/getAnswerDetailById?id=' + this.assessmentData.id).then(
        response => {
          this.assessmentData.dateTime = response.data.data.dateTime
          this.assessmentRecordData = {}
          response.data.data.questions.map(
            (question) => {
              this.assessmentRecordData['question' + question.questionId] = {
                primaryCategoryId: question.primaryCategoryId,
                secondCategoryId: question.secondCategoryId,
                questionId: question.questionId,
                optionId: question.optionId,
                optionScore: question.optionScore,
                otherOptionsAnswer: question.otherOptionsAnswer
              }
            }
          )
          this.initDetailsData()
        }
      )
    },
    showAssessmentDetails () {
      if (this.showAssessmentDetailsDialog) {
        this.title = this.personnel.name + ': ' + '评估结果'
        this.showText = '查看回答详情'
        this.showAssessmentDetailsDialog = false
        return
      }
      let htmlBody = '<div class="textCenter"><i class="el-icon-loading middle largerFont"></i><span class="middle">数据加载中...</span></div>'
      this.$alert(htmlBody, '加载数据', true)

      this.questionnaireData = {}
      if(!this.notShare){
        this.$http.get('getSurveyQuDetail?suId=' + this.assessmentData.surveyId).then(
          response => {
            this.questionnaireData = response.data.data
            this.getRecordData()  
          }
        )
      } else {
        this.showAssessmentDetailsByShare()
      }
    },
    showAssessmentDetailsByShare () {
      this.$http.get('share/getSurveyAnswerDetailByShare?reportId=' + this.personnel.reportId + '&pass=' + this.personnel.pw).then(
        response => {
          this.questionnaireData = response.data.data.questionnaireData
          this.assessmentData.dateTime = response.data.data.answerData.dateTime
          this.assessmentRecordData = {}
          response.data.data.answerData.questions.map(
            (question) => {
              this.assessmentRecordData['question' + question.questionId] = {
                primaryCategoryId: question.primaryCategoryId,
                secondCategoryId: question.secondCategoryId,
                questionId: question.questionId,
                optionId: question.optionId,
                optionScore: question.optionScore,
                otherOptionsAnswer: question.otherOptionsAnswer
              }
            }
          )
          this.initDetailsData()
        }
      )
    },
    delResult () {
      if(confirm("确定删除该评估?") === true) {
        this.$http.get('insAssessment/deleteAnswerById?id=' + this.assessmentData.id).then(
          response => {
            alert(response.data.message)
            this.clearAll()
          }
        )
      }
    }
  },
  watch: {
    // 监听参数变化
    personnel: {
      handler: function(val) {
        this.title = val.name + ': ' + '评估结果'
      },
      // 深度观察
      deep: true
    }
  },
  beforeCreate () {},
  created () { this.title = this.personnel.name + ': ' + '评估结果'},
  beforeMount () {},
  mounted () {
  },
  beforeUpdate () {},
  updated () {},
  beforeDestroy () {},
  destroyed () {}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.overview{background: #66AA11; color: #fff;}
.totalScore{font-size: 90px;}
.description{line-height: 200%; padding-left:12px; font-size:13px;}
.description .item{text-indent: 1em;}
.el-dialog__headerbtn {
  top: 0px !important;
}
.progress {
  background-color: #e5e5e5;
}
</style>
